<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box {
            height: 100px;
            margin: 0 auto;
            display: flex;
            justify-content: flex-start;
            position: relative;
        }
        .logo {
            padding-top: 20px;
            padding-left: 450px;
        }


    </style>
</head>

<body>
    <div class="box">

    </div>
    <script>
        var data = [{
            title: '首页',
            list: []
        }, {
            title: '概况',
            list: ['科技馆介绍', '馆内资讯', '通知公告', '预算公开']
        }, {
            title: '楼层展览',
            list: ['展馆一层', '展馆二层', '展馆三层', '临时展览']
        }, {
            title: '科普活动',
            list: ['科普大篷车', '科普报告会', '馆校结合', '魅力科学课堂', '科普表演剧', '理论广角', '创客训练营', '数学实验室']
        }, {
            title: '影院影讯',
            list: ['影院介绍', '播放场次', '影片介绍']
        }, {
            title: '科普志愿者',
            list: ['志愿者管理办法', '志愿者风采', '网上申请']
        }, {
            title: '咨询服务',
            list: ['开馆时间', '失物招领', '乘车路线', '参观须知', '联系我们']
        }, {
            title: '报名入口',
            list: ['资源下载', '科学运动会', '科普大篷车']
        }];

        var str = "";
        data.forEach(function (item) {
            // item得到数组内的每个元素
            str += ` <div class="list">
                        <h4>${item.title}</h4>
                        <ul>`;
            var str1 = "";
            for (var i = 0; i < item.list.length; i++) {
                // item.list[i]
                str1 += `<li>${item.list[i]}</li>`;
            }
            console.log(str1);
            str += str1 + "</ul></div>"

        })
         // console.log(str);
        var box = document.querySelector(".box");
        box.innerHTML = str;
        
        box.innerHTML = '<div class="logo"><img src="http://www.zzkjg.com/images/logo.jpg" alt=""></div>' + str;
       
    </script>
</body>

</html>